<template>
	<div style="display: flex;flex-direction: column;" class="otherPage corporateNews videoDisplay">
		<Header :selected="4"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bg_img? 'background:url('+bg_img+') no-repeat;background-size:cover;':''">
			</div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :bgColor="bgColor" :checked="3">
		</Navigation>
		<div class="content">
			<div class="content_bg">

				<el-row :gutter="6">
					<el-col :span="24" class="videoDisplayArea">
						<div class="videoDisplaySwiperArea">
							<div class="videoDisplaySwiper">
								<!-- 此处写轮播图 -->
								<div class="swiper-container" ref="videoDisplaySlide" id="videoDisplaySlide">
									<div class="swiper-wrapper">
										<div class="swiper-slide" v-for="(slide, index) in videoDisplaySlideList"
											:key="index">
										<!-- 	<div class="slide-content"> -->
												<video :poster="isMobile ? slide.preview : null"
														 
													@play="videoPlay(index)"
													 ref="video"
													 :src="baseUrl+slide.fileUrl"
													controls  @loadedmetadata="handleLoadedMetadata"
													preload="auto" muted x5-video-player-type="h5"
													 x5-playsinline
													playsinline webkit-playsinline="true" 
													class="videoList" style="width: 100%; height: auto;"></video>
											<!-- </div> -->
										</div>
									</div>
								</div>

							</div>

							<div class="swiper-button-area" style="position: relative; margin: 0 auto;  ">
								<div class="swiper-button-prev"></div>
								<div class="swiper-button-next"></div>

							</div>

							<div v-if="videosList.length>0" class="videolistArea">
								<!-- 此处写视频缩略图 -->
								<el-row class="videoListRow">
									<el-col :xs="12" :sm="6" :md="6" :lg="6" class="videoItem"
										v-for="(item,index) in videosList" :key="index">
										<video :poster="isMobile ? item.preview : null" @click="goToDetail(item.id)"
											ref="video" :src="baseUrl+item.fileUrl" loop preload="auto" muted controls
											playsinline="true" x5-video-player-type="h5" class="swiper-lazy"></video>
										<div @click="goToDetail(item.id)" class="vidoesTitle" :title="item.titles">
											{{item.titles}}
										</div>

									</el-col>
								</el-row>
								<el-row :gutter="24" type="flex" class="paginationArea">
									<el-pagination background :current-page.sync="currentPage" :page-size="pageSize"
										:layout="isShowJumper?'prev, pager, next,total,jumper ':'prev, next,total' "
										:total="total" :prev-text="$t('previousPage')" :next-text="$t('nextPage')"
										@current-change="handleCurrentChange" />
								</el-row>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../../src/components/common/header/Header.vue'
	import Navigation from '../../../src/components/common/navigation/Navigation.vue'
	import Footer from '../../../src/components/common/footer/Footer.vue'
	import Pagination from '../../../src/components/common/Pagination.vue'
	// 导入您需要的模块
	import Swiper from "swiper";
	import {
		corporateNews
	} from '../../utils/menu.js'
	export default {
		components: {
			Header,
			Navigation,
			Footer,
			Pagination
		},
		data() {
			return {
				isShowJumper: true,
				isMobile: false,
				loading: true,
				baseUrl: this.$request.getImgUrl(),
				bg_img: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				pageSize: 4,
				total: 0,
				currentPage: 1,
				menus: corporateNews,
				videoDisplaySlideList: [],
				breadcrumbItems: [{
						//首页
						label: this.$t('home'),
						to: '/home'
					},
					{
						//企业新闻
						label: this.$t('corporateNews'),
						to: '/corporateNews'
					},
					{
						//公告公示
						label: this.$t('videoDisplay'),
						to: '/videoDisplay'
					}
				],
				videosList: [],
				hoverIndex: -1,
				videoDisplaySlideSwiper: null,
				controls: true
			};
		},
		computed: {},
		created() {},
		mounted() {
			if (this.$request.checkIsMobile()) {
				this.isShowJumper = false;
			}
			this.videoBgImage();
			this.getVideosTrendData();
			this.bindVideoDisplayList().then(data => {
				this.initProductSwiper();
				this.loading = false;
				// 获取所有 .slide-content 元素
				const slideContents = document.querySelectorAll('.slide-content');
				// 遍历每个 .slide-content 元素
				slideContents.forEach(slideContent => {
					// 在当前 .slide-content 元素中查找所有视频元素
					const videos = slideContent.querySelectorAll('video');
					// 遍历每个视频元素
					videos.forEach(video => {
						video.addEventListener('play', () => {
							console.log('视频开始播放');
							// 在这里可以添加你的逻辑代码
							this.videoPlay();
						});
						video.addEventListener('ended', () => {
							console.log('视频播放完成');
							this.videoStop();
						});
					});
				});
				this.$request.handleLoadDataPreView();
				this.isMobile = this.$request.checkIsMobile();
				
				
				setInterval(function(){
					 
					
					const slideContents = document.querySelectorAll('.slide-content');
					// 遍历每个 .slide-content 元素
					slideContents.forEach(slideContent => {
						// 在当前 .slide-content 元素中查找所有视频元素
						const videos = slideContent.querySelectorAll('video');
						// 遍历每个视频元素
						videos.forEach(video => {
							video.style.width="100%"
						});
					});
				},3000)
			});
		},
		methods: {

			videoBgImage() {
				let params = {};
				let that = this;
				that.$request.videoBgImage(params).then(res => {
					that.bg_img = res.data.fileUrl;
				}).catch((error) => {
					console.log(error);
				});
			},
			videoPlay() {
				this.videoDisplaySlideSwiper.autoplay.stop();
			},
			videoStop() {
				this.videoDisplaySlideSwiper.autoplay.start();
			},
			formatDate(date, format) {
				// 自定义日期格式化方法
				// 可以使用moment.js或其他日期处理库来进行格式化
			},
			initProductSwiper() {
				if (this.videoDisplaySlideSwiper) {
					this.videoDisplaySlideSwiper.loop = false;
					this.videoDisplaySlideSwiper.destroy();
					this.videoDisplaySlideSwiper = null;
					console.log('videoDisplaySlideSwiper.destroy()====================')
				}
				console.log('initProductSwiper====================')
				this.videoDisplaySlideSwiper = new Swiper(this.$refs.videoDisplaySlide, {
					loop: true,
					keyboard: true,
					slidesPerView: 1,
					spaceBetween: 1,
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					},
					autoplay: {
						delay: 4000,
				
					},
					on: {

						transitionEnd: function() {
							
							 
						}
					}
				});
			},
			bindVideoDisplayList() {
				return new Promise((resolve, reject) => {
					// 请求表格数据
					let params = {};
					let that = this;
					this.$request.videoDisplayList(params).then(res => {
						if (res && res.data) {
							this.videoDisplaySlideList = res.data;

						}
						resolve();
					}).catch((error) => {
						console.log(error)
					})
				})
			},
			handleLoadedMetadata() {
				 
			 
				

			},
			///////////////获取新闻动态数据
			getVideosTrendData() {
				// 请求表格数据
				let params = {
					pageNum: this.currentPage,
					pageSize: this.pageSize,
				}
				let that = this;
				//videoDisplayList、videoDisplayPage
				this.$request.videoDisplayPage(params).then(res => {
					// 把请求到的数据给testDatas数组
					if (res && res.data) {
						console.log('res.data=', res.data)
						that.videosList = res.data.records;
						that.pageSize = res.data.size;
						that.total = res.data.total;
						that.currentPage = res.data.current;
					}

				}).catch((error) => {
					console.log(error)
				})
			},
			//获取点击页码，请求接口
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
				this.getVideosTrendData();
			},
			//////跳转详情页面
			goToDetail(id) {
				this.$router.push({
					name: this.$t("videoDisplayDetail"),
					query: {
						id: id,
					}
				});
			},

		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/corporateNews/corporateNews.css");

	.videoDisplay .videoDisplayArea {
		height: auto;
	}

	.videoDisplaySwiperArea {}

	.videoDisplaySwiper {

		margin: 0 auto;
	}

	.corporateNews .swiper-container {
		height: 100%;
	}

	.corporateNews .swiper-slide {
		height: 100%;
	}

	.corporateNews .slide-content {
		height: 100%;
	}

	.videolistArea {
		/* width: 60vw; */
		margin: 5px auto;
	}

	.videoDisplay .swiper-button-next:hover {
		opacity: 0.8;
	}

	.videoDisplay .swiper-button-prev:hover {

		opacity: 0.8;
	}

	.videoDisplay .swiper-button-prev {


		/* 		width: 34px;
		height: 56px; */
		background: url("../../assets/icons/icon_video_left.png") no-repeat;
		background-size: 23px 44px;
		border-radius: unset !important;
	}

	.videoDisplay .swiper-button-next {

		/* width: 34px;
		height: 56px; */
		background: url("../../assets/icons/icon_video_right.png") no-repeat;
		background-size: 23px 44px;
		border-radius: unset !important;
	}

	.videoDisplay {}

	.videoDisplay .videoItem {
		/* height: calc(20vh + 50px); */
		text-align: center;
	}

	.videoDisplay .videoItem video {}

	.videolistArea .paginationArea {

		justify-content: center;
		align-items: center;
	}

	.vidoesTitle {
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.videoDisplay .slide-content {}

	::v-deep .el-pagination span:not([class*=suffix]) {
		display: inline-block;
		font-size: 13px;
		min-width: 50px;
		height: 28px;
		line-height: 28px;
		vertical-align: top;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}



	.videoList {
		
		object-fit: fill;
	}

	.content_bg {
		margin: 0px auto;
		padding: 50px;

	}

	.videoListRow {
		display: flex;
		justify-content: center;
	}

	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}

		.swiper-button-area {
			width: calc(1px*(2560/1920) * 1175);
		}

		.videoDisplaySwiper {
			width: calc(1px*(2560/1920) * 857);
			height: calc(1px*(2560/1920) * 857 * 9 / 16);
		}

		.videolistArea {
			width: calc(1px*(2560/1920) * 1175);
		}

		.videoItem video {
			width: calc(1px*(2560/1920) * 283);
			height: calc(1px*(2560/1920) * 195);
		}

		.videoDisplay .swiper-button-prev,
		.videoDisplay .swiper-button-next {
			top: calc(-1px*(2560/1920) * 857 * 9 / 16 /2);
		}
	}

	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}

		.swiper-button-area {
			width: calc(1px*(2560/1920) * 1175);
		}


		.videoDisplaySwiper {
			width: calc(1px*(2560/1920) * 857);
			height: calc(1px*(2560/1920) * 857 * 9 / 16);
		}

		.videolistArea {
			width: calc(1px*(2560/1920) * 1175);
		}

		.videoItem video {
			width: calc(1px*(2560/1920) * 283);
			height: calc(1px*(2560/1920) * 195);
		}

		.videoDisplay .swiper-button-prev,
		.videoDisplay .swiper-button-next {
			top: calc(-1px*(2560/1920) * 857 * 9 / 16 /2);
		}
	}

	@media (max-width: 2320px) {
		.content_bg {
			width: calc(2320px * 0.8);
		}

		.swiper-button-area {
			width: calc(1px*(2320/1920) * 1175);
		}

		.videoDisplaySwiper {
			width: calc(1px*(2320/1920) * 857);
			height: calc(1px*(2320/1920) * 857 * 9 / 16);
		}

		.videolistArea {
			width: calc(1px*(2320/1920) * 1175);
		}

		.videoItem video {
			width: calc(1px*(2320/1920) * 283);
			height: calc(1px*(2320/1920) * 195);
		}

		.videoDisplay .swiper-button-prev,
		.videoDisplay .swiper-button-next {
			top: calc(-1px*(2320/1920) * 857 * 9 / 16 /2);
		}
	}

	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
		}

		.swiper-button-area {
			width: calc(1px*(2120/1920) * 1175);
		}

		.videoDisplay .swiper-button-prev,
		.videoDisplay .swiper-button-next {
			top: calc(-1px*(2120/1920) * 857 * 9 / 16 /2);
		}

		.videoDisplaySwiper {
			width: calc(1px*(2120/1920) * 857);
			height: calc(1px*(2120/1920) * 857 * 9 / 16);
		}

		.videolistArea {
			width: calc(1px*(2120/1920) * 1175);
		}

		.videoItem video {
			width: calc(1px*(2120/1920) * 283);
			height: calc(1px*(2120/1920) * 195);
		}
	}

	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
		}

		.swiper-button-area {
			width: calc(1px * 1175);
		}

		.videoDisplaySwiper  {
			width: 857px;
			height: calc(857px * 9 / 16);
		}

		.swiper-wrapper {
			width: 100%;
			height: 100%;
		}

		.corporateNews .swiper-container {
			width: 100%;
			height: 100%;
		}

		.swiper-slide {
			width: 100%;
			height: 100%;
		}

		.slide-content {
			width: 100%;
			height: 100%;
		}
		.slide-content video {
			width: 100%;
			height: 100%;
		}
		.videolistArea {
			width: calc(1920px * 0.6);
		}

		.videoItem video {
			width: calc((1920px * 0.6 - 30px) /4);
			height: calc((1920px * 0.6 - 30px) /4 * 9 / 16)
		}

		.videoDisplay .swiper-button-prev,
		.videoDisplay .swiper-button-next {
			top: calc(-857px * 9 / 16 / 2);
		}

	}

	@media (max-width: 1720px) {


		.content_bg {
			width: calc(1720px * 0.8);
		}

		.swiper-button-area {
			width: calc(1px*(1720/1920) * 1175);
		}

		.videoDisplaySwiper {
			width: calc(1px*(1720/1920) * 857);
			height: calc(1px*(1720/1920) * 857 * 9 / 16);
		}

		.videoDisplay .swiper-button-prev,
		.videoDisplay .swiper-button-next {
			top: calc(-1px*(1720/1920) * 857 * 9 / 16 /2);
		}

		.videolistArea {
			width: calc(1px*(1720/1920) * 1175);
		}

		.videoItem video {
			width: calc((1720px * 0.6 - 30px) /4);
			height: calc((1720px * 0.6 - 30px) /4 * 9 / 16)
		}
	}

	@media (max-width: 1520px) {
		.content_bg {
			width: calc(1520px * 0.8);
		}

		.swiper-button-area {
			width: calc(1px*(1520/1920) * 1175);
		}

		.videoDisplay .swiper-button-prev,
		.videoDisplay .swiper-button-next {
			top: calc(-1px*(1520/1920) * 857 * 9 / 16 /2);
		}

		.videoDisplaySwiper {
			width: calc(1px*(1520/1920) * 857);
			height: calc(1px*(1520/1920) * 857 * 9 / 16);
		}

		.videolistArea {
			width: calc(1px*(1520/1920) * 1175);
		}

		.videoItem video {
			width: calc((1520px * 0.6 - 30px) /4);
			height: calc((1520px * 0.6 - 30px) /4 * 9 / 16)
		}
	}

	@media (max-width: 1366px) {
		.content_bg {
			width: calc(1366px * 0.8);
		}

		.swiper-button-area {
			width: calc(1px*(1366/1920) * 1175);
		}

		.videoDisplay .swiper-button-prev,
		.videoDisplay .swiper-button-next {
			top: calc(-1px*(1366/1920) * 857 * 9 / 16 /2);
		}

		.videoDisplaySwiper {
			width: calc(1px*(1366/1920) * 857);
			height: calc(1px*(1366/1920) * 857 * 9 / 16);
		}

		.videolistArea {
			width: calc(1px*(1366/1920) * 1175);
		}

		.videoItem video {
			width: calc((1366px * 0.6 - 30px) /4);
			height: calc((1366px * 0.6 - 30px) /4 * 9 / 16)
		}
	}

	@media (max-width: 1120px) {
		.videoDisplaySwiper {
			width: calc((1120px * 0.7));
			height: calc((1120px * 0.7) * 9 / 16);
		}

		.corporateNews .swiper-container,
		.corporateNews .swiper-slide,
		.slide-content,
		.swiper-wrapper {
			width: calc(1120px * 0.7) !important;
			height: calc(1120px * 0.7 * 9 / 16);
		}

		.videoDisplay .videolistArea {
			width: calc(1120px * 0.7) !important;
		}

		.videoDisplay .swiper-button-prev,
		.videoDisplay .swiper-button-next {
			top: calc(-1px*(1120 * 0.7 * 9 / 16 /2));
		}

		.videoDisplay .swiper-button-prev {
			left: -2px;
		}

		.videoDisplay .swiper-button-next {
			right: -2px;
		}

		.videolistArea {
			width: calc((1120px * 0.7));
		}

		.videoList {
			width: calc(1120px * 0.7 - 5px);
			min-width: calc(1120px * 0.7 - 5px);
			height: calc(1120px * 0.7 * 9 / 16);
		}

		.videoListRow {
			display: block;
			justify-content: center;
		}

		.videolistArea .paginationArea {
			margin-bottom: 20px;
		}

		.videoDisplay .videoItem {
			width: calc((1120px * 0.7) / 2);
			height: calc((1120px * 0.7) / 2 * 9 / 16 + 40px);
		}

		.videoItem video,
		.videoDisplay .videoItem video {
			width: calc((1120px * 0.7 - 10px) / 2);
			height: calc((1120px * 0.7 - 10px) / 2 * 9 / 16);
		}

		.videoDisplay .videoItem {
			text-align: left;
		}

		.vidoesTitle {
			line-height: 16px;
		}
	}

	@media (max-width: 1024px) {
		.content_bg {
			width: calc(1024px * 0.8);
		}

		.videoDisplaySwiper {
			width: calc((1024px * 0.7));
			height: calc((1024px * 0.7) * 9 / 16);
		}

		.corporateNews .swiper-container,
		.corporateNews .swiper-slide,
		.slide-content,
		.swiper-wrapper {
			width: calc(1024px * 0.7) !important;
			height: calc(1024px * 0.7 * 9 / 16);
		}

		.videoDisplay .videolistArea {
			width: calc(1024px * 0.7) !important;
		}

		.swiper-button-area {
			width: calc(1024px * 0.7) !important;
		}

		.videoDisplay .swiper-button-prev,
		.videoDisplay .swiper-button-next {
			top: calc(-1px*(1024 * 0.7 * 9 / 16 /2));
		}

		.videoDisplay .swiper-button-prev {
			left: 2px;
		}

		.videoDisplay .swiper-button-next {
			right: 2px;
		}

		.videolistArea {
			width: calc((1024px * 0.7));
		}

		.videoList {
			width: calc(1024px * 0.7 - 5px);
			min-width: calc(1024px * 0.7 - 5px);
			height: calc(1024px * 0.7 * 9 / 16);
		}

		.videolistArea .paginationArea {
			margin-bottom: 20px;
		}

		.videoDisplay .videoItem {
			width: calc((1024px * 0.7) / 2);
			height: calc((1024px * 0.7) / 2 * 9 / 16 + 40px);
		}

		.videoItem video,
		.videoDisplay .videoItem video {
			width: calc((1024px * 0.7 - 10px) / 2);
			height: calc((1024px * 0.7 - 10px) / 2 * 9 / 16);
		}


		.vidoesTitle {
			line-height: 16px;
		}
	}

	@media (max-width: 900px) {
		.content_bg {
			width: calc(900px * 0.8);
		}

		.videoDisplaySwiper {
			width: calc((900px * 0.7));
			height: calc((900px * 0.7) * 9 / 16);
		}

		.corporateNews .swiper-container,
		.corporateNews .swiper-slide,
		.slide-content,
		.swiper-wrapper {
			width: calc(900px * 0.7) !important;
			height: calc(900px * 0.7 * 9 / 16);
		}

		.videoDisplay .videolistArea {
			width: calc(900px * 0.7) !important;
		}

		.swiper-button-area {
			width: calc(900px * 0.7) !important;
		}

		.videoDisplay .swiper-button-prev,
		.videoDisplay .swiper-button-next {
			top: calc(-1px*(900 * 0.7 * 9 / 16 /2));
		}

		.videoDisplay .swiper-button-prev {
			left: 2px;
		}

		.videoDisplay .swiper-button-next {
			right: 2px;
		}

		.videolistArea {
			width: calc((900px * 0.7));
		}

		.videoList {
			width: calc(900px * 0.7 - 5px);
			min-width: calc(900px * 0.7 - 5px);
			height: calc(900px * 0.7 * 9 / 16);
		}

		.videolistArea .paginationArea {
			margin-bottom: 20px;
		}

		.videoDisplay .videoItem {
			width: calc((900px * 0.7) / 2);
			height: calc((900px * 0.7) / 2 * 9 / 16 + 40px);
		}

		.videoItem video,
		.videoDisplay .videoItem video {
			width: calc((900px * 0.7 - 10px) / 2);
			height: calc((900px * 0.7 - 10px) / 2 * 9 / 16);
		}


		.vidoesTitle {
			line-height: 16px;
		}
	}

	@media(max-width:768px) {
		.content_bg {
			width: calc(768px * 0.8);
		}

		.videoDisplaySwiper {
			width: calc((768px * 0.7));
			height: calc((768px * 0.7) * 9 / 16);
		}

		.corporateNews .swiper-container,
		.corporateNews .swiper-slide,
		.slide-content,
		.swiper-wrapper {
			width: calc(768px * 0.7) !important;
			height: calc(768px * 0.7 * 9 / 16);
		}

		.videoDisplay .videolistArea {
			width: calc(768px * 0.7) !important;
		}

		.swiper-button-area {
			width: calc(768px * 0.7) !important;
		}

		.videoDisplay .swiper-button-prev,
		.videoDisplay .swiper-button-next {
			top: calc(-1px*(768 * 0.7 * 9 / 16 /2));
		}

		.videoDisplay .swiper-button-prev {
			left: 2px;
		}

		.videoDisplay .swiper-button-next {
			right: 2px;
		}

		.videolistArea {
			width: calc((768px * 0.7));
		}

		.videoList {
			width: calc(768px * 0.7 - 5px);
			min-width: calc(768px * 0.7 - 5px);
			height: calc(768px * 0.7 * 9 / 16);
		}

		.videolistArea .paginationArea {
			margin-bottom: 20px;
		}

		.videoDisplay .videoItem {
			width: calc((768px * 0.7) / 2);
			height: calc((768px * 0.7) / 2 * 9 / 16 + 40px);
		}

		.videoItem video,
		.videoDisplay .videoItem video {
			width: calc((768px * 0.7 - 10px) / 2);
			height: calc((768px * 0.7 - 10px) / 2 * 9 / 16);
		}


		.vidoesTitle {
			line-height: 16px;
		}
	}

	@media(max-width:440px) {
		.content_bg {
			width: calc(430px * 0.8);
		}

		.videoDisplaySwiper {
			width: calc((430px * 0.7));
			height: calc((430px * 0.7) * 9 / 16);
		}

		.corporateNews .swiper-container,
		.corporateNews .swiper-slide,
		.slide-content,
		.swiper-wrapper {
			width: calc(430px * 0.7) !important;
			height: calc(430px * 0.7 * 9 / 16);
		}

		.videoDisplay .videolistArea {
			width: calc(430px * 0.7) !important;
		}

		.swiper-button-area {
			width: calc(430px * 0.7) !important;
		}

		.videoDisplay .swiper-button-prev,
		.videoDisplay .swiper-button-next {
			top: calc(-1px*(430 * 0.7 * 9 / 16 /2));
		}

		.videoDisplay .swiper-button-prev {
			left: 2px !important;
		}

		.videoDisplay .swiper-button-next {
			right: 2px !important;
		}

		.videolistArea {
			width: calc((430px * 0.7));
		}

		.videoList {
			width: calc(430px * 0.7 - 5px);
			min-width: calc(430px * 0.7 - 5px);
			height: calc(430px * 0.7 * 9 / 16);
		}

		.videolistArea .paginationArea {
			margin-bottom: 20px;
		}

		.videoDisplay .videoItem {
			width: calc((430px * 0.7) / 2);
			height: calc((430px * 0.7) / 2 * 9 / 16 + 40px);
		}

		.videoItem video,
		.videoDisplay .videoItem video {
			width: calc((430px * 0.7 - 10px) / 2);
			height: calc((430px * 0.7 - 10px) / 2 * 9 / 16);
		}


		.vidoesTitle {
			line-height: 16px;
		}

	}
</style>